<script setup>
import { onMounted, ref } from 'vue';
import * as echarts from 'echarts';
import { get_venueUse } from '@/request';
const RefBox = ref(null)
var option = {
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
        axisTick: {
            show: false,

        },
        axisLabel:{
                color:'#eee'
            }
    },
     tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'cross',
            label: {
                backgroundColor: '#6a7985'
            }
        }
    },
    yAxis: {
        type: 'value',
        axisLine: {
            show: false
        },
        axisTick: {
            show: false,
        },
        axisLabel: {
            show: false
        },
    },
    grid: {
        height: '100',
        top: '20',

    },
    series: [
        {
            data: [120, 200, 150, 80, 70],
            type: 'bar',
            showBackground: true,
            barWidth:35,
            backgroundStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    { offset: 0, color: '#311987' },
                    { offset: 0.5, color: '#311987' },
                    { offset: 1, color: '#311987' }
                ]),
                borderRadius: [200, 200, 0, 0]
            },
            itemStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    { offset: 0, color: '#C000FF' },
                    { offset: 0.5, color: '#5427FF' },
                    { offset: 1, color: '#5427FF' }
                ]),
                borderRadius: [200, 200, 0, 0]
            },
        }
    ]
};
onMounted(() => {
    var myChart = echarts.init(RefBox.value);
    get_venueUse().then(resp=>{
        console.log('场地使用',resp.data.data)
        option.xAxis.data=resp.data.data.map(item=>item.title)
        option.series[0].data=resp.data.data.map(item=>item.value)
        myChart.setOption(option)
        window.addEventListener('resize', () => {
        myChart.resize();
    });
    })
    
})
</script>

<template>
    <div class="Made" ref="RefBox">

    </div>
</template>

<style scoped lang="scss">
.Made {
    width: 100%;
    height: 22vh;
    // border: #fcc solid 1px;
}
</style>
